<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery/jquery-1.11.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$('#menu a').on('click', function(e){
		e.preventDefault();
		var href = $(this).attr('href');
		getContent(href, true);
		$('#menu a').removeClass('active');
		$(this).addClass('active');
	});
});
window.addEventListener("popstate", function(e) {
	getContent(location.pathname, false);
});
function getContent(url, addEntry) {
	$.get(url)
	.done(function( data ) {
		$('#content').html(data);
		if(addEntry == true) {
			history.pushState(null, null, url);
		}
	});
}
</script>
<style type="text/css">
.active { color: red; }
</style>
</head>
<body>
<h1>History API示例</h1>
<ul id="menu">
    <li><a href="news.html">News</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
<div id="content">
    <h2>当前内容页：index.html</h2>
</div>
</body>
</html> 
